import { observer } from "mobx-react-lite";

const AssetProperty = observer((props: any) => {
    return (
        <div className='text-sm space-y-2 pt-3 pl-9 flex flex-col h-full'>
            <div className='flex space-x-4'>
                <div className='shrink-0'>Name:</div>
                <div className='flex-1 flex justify-start'>
                    aaaa
                </div>
            </div>

            <div className='flex space-x-4'>
                <div className='shrink-0'>Asset:</div>
                <div className='flex-1 flex justify-start'>
                    bbbb
                </div>
            </div>

            <a
                className="inline-block rounded border
                 border-indigo-600
                 bg-indigo-600 px-12 py-1 
                  text-sm font-medium
                   text-white hover:bg-transparent
                   hover:text-indigo-600 
                   focus:outline-none 
                   focus:ring
                   w-full
                    active:text-indigo-500"
                href="javascript:"
            >
                Replace Image
            </a>

            <div className="flex items-center">
                <input id="checked-checkbox" type="checkbox" value="" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
                <label htmlFor="checked-checkbox" className="ml-1 text-sm font-medium">Mesh</label>
            </div>

            <div className="flex items-center space-x-4">
                <a
                    className="inline-block rounded border
                 border-indigo-600
                 bg-indigo-600 px-12 py-1 
                  text-sm font-medium
                   text-white hover:bg-transparent
                   hover:text-indigo-600 
                   focus:outline-none 
                   focus:ring
                    active:text-indigo-500"
                    href="javascript:"
                >
                    Edit Mesh
                </a>
                <a
                    className="inline-block rounded border
                 border-indigo-600
                 bg-indigo-600 px-12 py-1 
                  text-sm font-medium
                   text-white hover:bg-transparent
                   hover:text-indigo-600 
                   focus:outline-none 
                   focus:ring
                    active:text-indigo-500"
                    href="javascript:"
                >
                    Reset
                </a>
            </div>

            <div className='flex space-x-4'>
                <div className='shrink-0'>Bones with weight:</div>
            </div>
            <a
                className="inline-block rounded border
                 border-indigo-600
                 bg-indigo-600 px-12 py-1 
                  text-sm font-medium
                   text-white hover:bg-transparent
                   hover:text-indigo-600 
                   focus:outline-none 
                   focus:ring
                   w-full
                    active:text-indigo-500"
                href="javascript:"
            >
                Add Bone to Bind
            </a>
            <div className="border-2 w-full grow">

            </div>
            <a
                className="inline-block rounded border
                 border-indigo-600
                 bg-indigo-600 px-12 py-1 
                  text-sm font-medium
                   text-white hover:bg-transparent
                   hover:text-indigo-600 
                   focus:outline-none 
                   focus:ring
                   w-full
                    active:text-indigo-500"
                href="javascript:"
            >
                Replace Image
            </a>
        </div>
    );
});


export { AssetProperty };